<template>
  <div class="login">
      <div class="box">
          <h3>用户名密码登录</h3>
          <el-input v-model="id" placeholder="用户名/邮箱/手机号码"></el-input>
          <el-input v-model="password" placeholder="密码" show-password></el-input>
          <el-button type="primary" class="button log">登录</el-button>
          <h4>没有账号？：</h4>
          <router-link to="/register"><el-button type="primary" class="button reg">点我注册</el-button></router-link>
      </div>
  </div>
</template>

<script>
export default {
data() {
    return {
      id: '',
      password:''
    }
  }
}
</script>

<style scoped lang="scss">
.login{
    padding:10px;
}
.box{
    position: fixed;
    width:400px;
    height:400px;
    border:1px solid #ccc;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    line-height: 80px;
    background: lightblue;
    padding:10px;
    h3{
        text-align: center;
        margin:0 10px;
    }
    h4{
        text-align: left;
        margin:80px 0px;
    }
    .button{
        border-radius: 12px;
    }
    .log{
        width:400px;
        position: absolute;
        left:10px;
        top:270px;
    }
    .reg{
        position: absolute;
        left:120px;
        top:350px;
    }
}
</style>